<template>
  <div class="table">
    <Skeleton :loading="props.loading">
      <template #ske>
        <div style="width: 100%">
          <el-skeleton-item variant="text"
            style="width: 50%; height: 40px; margin: 0px 0px 20px 0"
          />
          <el-skeleton-item variant="text"
            style="width: 100%; height: 80px; margin: 0px 0px 10px 0"
          />
          <el-skeleton-item variant="text"
            style="width: 100%; height: 40px; margin: 15px 0 0px 0"
          />
        </div>
      </template>
      <template #main>
        <h3>{{ $t("language.Share.table.name") }}</h3>
        <table>
          <thead>
            <tr>
              <th>{{ $t("language.Share.table.head1") }}</th>
              <th>{{ $t("language.Share.table.head2") }}</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>{{ $t("language.Share.table.text") }}</td>
              <td>0</td>
            </tr>
          </tbody>
        </table>
      </template>
    </Skeleton>
  </div>
</template>

<script setup lang="ts">

let props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
});


</script>

<style scoped lang="scss">
.table {
  width: 100%;
  padding: 0 10px;
  height: 100%;
  min-height: 500px;
  h3 {
    font-size: 26px;
    color: #fff;
    margin: 15px 0 30px;
  }
  table {
    border-collapse: collapse;
    margin-top: 20px;
    width: 100%;
    padding: 0;
    border: 1px solid #3d4148;
    th {
      text-align: center;
      font-size: 14px;
      color: #b5bac8;
      height: 100%;
      padding: 8px;
      line-height: 24px;
      font-weight: bold;
      background-color: rgb(61, 65, 72);
      border: 1px solid #4b4e55;
    }
    td {
      text-align: center;
      font-size: 14px;
      border: 1px solid #3d4148;
      color: #b5bac8;
      padding: 10px 8px;
    }
  }
}
</style>
